<template>
  <v-container grid-list-lg>
    <v-layout wrap>
      <v-flex v-for="i in ($vuetify.breakpoint.xsOnly ? 2 : ($vuetify.breakpoint.smOnly ? 4 : 9))" :key="i" xs12 sm6 md4 lg4 xl3>
        <v-card>
          <div class="skeleton">
          </div>
        </v-card>
      </v-flex>
    </v-layout>
  </v-container>
</template>

<script>
export default {

}
</script>

<style>
/* .skeleton {
  padding: 10px;
}
.skeleton-head {
  width: 100px;
  height: 100px;
  float: left;
}

.skeleton-body {
  margin-left: 110px;
}

.skeleton-title {
  width: 500px;
  height: 60px;
}

.skeleton-content {
  width: 260px;
  height: 30px;
  margin-top: 10px;
}
.skeleton .skeleton-head,
.skeleton .skeleton-title,
.skeleton .skeleton-content {
  background: rgb(194, 207, 214);
  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.15) 25%,
    transparent 25%
  );
  background-size: 20rem 20rem;
  animation: skeleton-stripes 1s linear infinite;
}
@keyframes skeleton-stripes {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 20rem 0;
  }
} */
/*
Animated skeleton screen using CSS.

Create shapes using gradients that simulate solids.

Use `:empty` pseduo-class to show skeleton screen background only while container has no content (ex: for the "loading" state). When content is added to the container element, the pseudo-class selector won't match anymore and the skeleton screen will be removed automatically; no need to toggle a separate class on the container.

See: https://developer.mozilla.org/en-US/docs/Web/CSS/:empty

Animating one layer of the background which is a tilted linear gradient with white in the middle to achieve shine effect.
*/
.skeleton:empty {
  margin: 0;
  width: 100%;
  /* max-width: 320px; */
  height: 320px;

  background-image: /* radial-gradient(
      circle 50px at 50px 50px,
      lightgray 99%,
      transparent 0
    ), */ linear-gradient(
      100deg,
      rgba(255, 255, 255, 0),
      rgba(255, 255, 255, 0.5) 50%,
      rgba(255, 255, 255, 0) 80%
    ),
    linear-gradient(lightgray 160px, transparent 0),
    linear-gradient(lightgray 24px, transparent 0),
    linear-gradient(lightgray 16px, transparent 0),
    linear-gradient(lightgray 16px, transparent 0),
    linear-gradient(lightgray 16px, transparent 0);
  background-repeat: no-repeat;
  background-size: 30px 320px, 100% 320px, 40% 320px, 100% 320px, 100% 320px,
    80% 320px;
  background-position: 0 0, 0 0, 0 180px, 0 220px, 0px 250px, 0px 280px;
  animation: shine 1s infinite;
}
@keyframes shine {
  to {
    background-position: 100% 0, 0 0, 0 180px, 0 220px, 0px 250px, 0px 280px;
  }
}
</style>
